<template>
  <div class="app-container">

    <u-page title="订单管理">
      <div style="margin-bottom: 20px">
        <el-alert
          title="温馨提示"
          type="success"
          description="记账时间或者交易时间必填。"
          :closable="false"
        />
      </div>

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="订单号" prop="sale_no">
            <el-input v-model="listQuery.sale_no" placeholder="小票号/函云订单号/支付单号" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="会员卡号" prop="card_no">
            <el-input v-model="listQuery.card_no" placeholder="会员卡号" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="第三方订单号" prop="external_order_no">
            <el-input v-model="listQuery.external_order_no" placeholder="第三方订单号" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="商友订单号" prop="fetch_code">
            <el-input v-model="listQuery.fetch_code" placeholder="商友订单号" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="收银台" prop="cashdesk_no">
            <el-input v-model="listQuery.cashdesk_no" placeholder="收银台" clearable style="width: 140px" />
          </el-form-item>
          <el-form-item label="商户" prop="dept_merch">
            <el-input v-model="listQuery.dept_merch" placeholder="商户/专柜" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="记账日期" prop="inputDateRange">
            <u-date-time-picker v-model="searchDate" @change="changeSearchDate" />
          </el-form-item>
          <el-form-item label="交易时间" prop="inputDateTimeRange">
            <u-date-time-picker v-model="inputDateTimeRange" @change="changeSaleTime" />
          </el-form-item>
          <el-form-item label="部门编码" prop="dept_code">
            <el-input v-model="listQuery.dept_code" placeholder="部门编码" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="部类" prop="dept_classify">
            <el-input v-model="listQuery.dept_classify" placeholder="部门分类" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="课室" prop="dept_room">
            <el-input v-model="listQuery.dept_room" placeholder="课室" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="部门" prop="dept_name">
            <el-input v-model="listQuery.dept_name" placeholder="部门名称" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        row-key="index"
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:left>
          <el-table-column type="expand">
            <template slot-scope="{row}">
              <div class="orderinfo">
                <div class="goodinfolist">
                  <div class="goodinfotitle">
                    <span>商品名称</span>
                    <span>商品编码</span>
                    <span>商品条码</span>
                    <span>商品单价/元</span>
                    <span>数量</span>
                    <span>商品合计/元</span>
                  </div>
                  <div v-for="goods in row.goodsList" class="goodinfo">
                    <div>
                      {{ goods.goods_name }}
                    </div>
                    <div>
                      {{ goods.goods_code }}
                    </div>
                    <div>
                      {{ goods.goods_barcode }}
                    </div>
                    <div>
                      {{ goods.price }}
                    </div>
                    <div>
                      x{{ goods.num }}
                    </div>
                    <div>
                      {{ goods.z_amount }}
                    </div>
                  </div>
                </div>
                <div class="payinfolist">
                  <div class="payinfotitle">
                    <span>支付类型</span>
                    <span>支付金额/元</span>
                  </div>
                  <div v-for="pay in row.payList" class="payinfo">
                    <div>
                      {{ pay.paymode_name }}
                    </div>
                    <div>
                      {{ pay.paid_amount }}
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </template>
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="hdlEdit(row)">订单详情</el-button>
              <el-button :disabled="row.mark_Invoicing === 1" type="text" @click="getInvoice(row)">{{ row.mark_Invoicing?'已开票':'申请开票' }}</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>

    <u-dialog title="订单详情" :show.sync="dialogFormVisible" :footer="false">
      <el-form ref="dialogForm" :model="dataForm" label-width="60px">
        <div style="margin-bottom: 10px;font-weight: 600;">订单信息</div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="交易时间">{{ dataForm.sale_time }}</el-descriptions-item>
          <el-descriptions-item label="记账日期">{{ dataForm.accounting_date }}</el-descriptions-item>
          <el-descriptions-item label="订单号">{{ dataForm.sale_no }}</el-descriptions-item>
          <el-descriptions-item label="第三方订单号">{{ dataForm.external_order_no }}</el-descriptions-item>
          <el-descriptions-item label="卡号">{{ dataForm.vipcard_no }}</el-descriptions-item>
          <el-descriptions-item label="收银台">{{ dataForm.cashdesk_no }}</el-descriptions-item>
          <el-descriptions-item label="收款员">{{ dataForm.cashier }}</el-descriptions-item>
          <el-descriptions-item label="总金额/元">{{ dataForm.z_amount }}</el-descriptions-item>
          <el-descriptions-item label="优惠金额/元">{{ dataForm.disc_amount }}</el-descriptions-item>
          <el-descriptions-item label="实付金额/元">{{ dataForm.paid_amount }}</el-descriptions-item>
          <el-descriptions-item label="商友订单号">{{ dataForm.fetch_code }}</el-descriptions-item>
          <el-descriptions-item label="传输标记">{{ dataForm.mark_trans === '0'? '未传输':'已传输' }}</el-descriptions-item>
          <el-descriptions-item label="核算类型">{{ dataForm.accounting_method_name }}</el-descriptions-item>
          <el-descriptions-item label="合同号">{{ dataForm.cont_no }}</el-descriptions-item>
          <el-descriptions-item v-if="dataForm.sale_re === '1'" label="退货订单号">{{ dataForm.saleno_source }}</el-descriptions-item>
          <el-descriptions-item label="部门编码">{{ dataForm.dept_code }}</el-descriptions-item>
          <el-descriptions-item label="商户">{{ dataForm.dept_merch }}</el-descriptions-item>
          <el-descriptions-item label="部类">{{ dataForm.dept_classify }}</el-descriptions-item>
          <el-descriptions-item label="课室">{{ dataForm.dept_room }}</el-descriptions-item>
          <el-descriptions-item label="部门">{{ dataForm.dept_name }}</el-descriptions-item>
        </el-descriptions>

        <div style="margin: 10px 0; font-weight: 600;">商品列表</div>
        <el-table :data="dataForm.goodsList" border size="small" :header-cell-style="{backgroundColor: '#fafafa'}">
          <el-table-column label="商品名称" prop="goods_name" />
          <el-table-column label="商品编码" prop="goods_code" />
          <el-table-column label="商品条码" prop="goods_barcode" />
          <el-table-column label="商品单价/元" prop="price" />
          <el-table-column label="数量" prop="num" />
          <el-table-column label="商品合计/元" prop="z_amount" />
        </el-table>

        <div style="margin: 10px 0; font-weight: 600;">支付信息</div>
        <el-table :data="dataForm.payList" border size="small" :header-cell-style="{backgroundColor: '#fafafa'}">
          <el-table-column label="支付类型" prop="paymode_name" />
          <el-table-column label="支付金额/元" prop="paid_amount" />
        </el-table>
      </el-form>
    </u-dialog>

    <invoice ref="invoiceRef" v-model="showInvoice" :data="invoiceData" @confirm="handleCloseInvoice" />
  </div>
</template>
<script>
import invoice from '@/components/module/invoice.vue'
export default {

  components: { invoice },
  data() {
    return {
      invoiceData: {},
      showInvoice: false,
      api: this.$u.api.Order,
      list: [],
      listLoading: false,
      listOptions: {
        index: true,
        mutiSelect: true,
        stripe: true
      },
      listQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1,
        sale_no: '',
        cashdesk_no: '',
        channel: '',
        card_no: '',
        fetch_code: ''
      },
      inputDateTimeRange: [],
      channels: [{
        value: '02',
        label: '群光广场(成都店)'
      }],
      // 表格
      columns: [
        {
          prop: 'sale_time',
          label: '交易时间',
          width: '150'
        },
        {
          prop: 'accounting_date',
          label: '记账日期',
          width: '150',
          render: (h, params) => {
            return h('el-tag', params.row.accounting_date)
          }
        },
        {
          prop: 'sale_no',
          label: '订单号',
          width: '200',
          render: (h, params) => {
            return h('el-tag', params.row.sale_no)
          }
        },
        {
          prop: 'external_order_no',
          label: '第三方订单号',
          width: '200',
          render: (h, params) => {
            if (params.row.external_order_no) {
              return h('el-tag', params.row.external_order_no)
            }
          }
        },
        {
          prop: 'vipcard_no',
          label: '卡号',
          width: '160',
          render: (h, params) => {
            if (params.row.vipcard_no) {
              return h('el-tag', params.row.vipcard_no)
            }
          }
        },
        {
          prop: 'cashdesk_no',
          label: '收银台',
          width: '80',
          render: (h, params) => {
            return h('el-tag', params.row.cashdesk_no)
          }
        },
        {
          prop: 'z_amount',
          label: '总金额/元',
          width: '100',
          render: (h, params) => {
            const { z_amount } = params.row
            let type = 'success'
            if (z_amount < 0) {
              type = 'danger'
            }
            return h('el-tag', { props: { type }}, z_amount)
          }
        },
        {
          prop: 'disc_amount',
          label: '优惠金额/元',
          width: '100',
          render: (h, params) => {
            return h('el-tag', { props: { type: 'warning' }}, params.row.disc_amount)
          }
        },
        {
          prop: 'paid_amount',
          label: '实付金额/元',
          width: '100',
          render: (h, params) => {
            return h('el-tag', params.row.paid_amount)
          }
        },
        {
          prop: 'fetch_code',
          label: '商友订单号',
          width: '130'
        },
        {
          prop: 'dept_code',
          label: '部门编码'
        },
        {
          prop: 'dept_merch',
          label: '商户'
        },
        {
          prop: 'dept_classify',
          label: '部类'
        },
        {
          prop: 'dept_room',
          label: '课室'
        },
        {
          prop: 'dept_name',
          label: '部门'
        }
      ],
      dialogFormVisible: false,
      dataForm: {}
    }
  },
  created() {
  },
  methods: {
    // 确认开票
    handleCloseInvoice() {
      this.showInvoice = false
      this.hdlList()
    },
    // 打开开票窗口
    getInvoice(row) {
      this.showInvoice = true
      this.invoiceData = row
      this.$refs.invoiceRef.getInvoiceDetail(row)
    },
    // 交易时间格式转换
    changeSaleTime(item) {
      if (item) {
        this.listQuery.beginDateTime = item[0]
        this.listQuery.endDateTime = item[1]
      } else {
        this.listQuery.beginDateTime = ''
        this.listQuery.endDateTime = ''
      }
    },
    /**
     * 获取列表数据
     */
    hdlList() {
      const self = this
      // 打开加载状态
      self.listLoading = true

      self.api.list(self.listQuery).then(res => {
        // 获取分页列表数据
        self.list = res.data.list

        // fix:修复ID重复的问题,设置table表格key值必须唯一
        self.list.forEach((item, index) => {
          self.list[index].index = index
        })
        // 获取分页数据,总页数
        self.listQuery.totalCount = res.data.totalCount
        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container{
  ::v-deep {
    .filter {
      border: 0;
    }
  }
}
.orderinfo{
  width: 100%;
  display: flex;
  border: 1px solid #dfe6ec;
}

.goodinfolist{
  width: 75%;
  border-right:2px solid #dfe6ec ;
}
.goodinfotitle{
  padding: 10px;
  text-align: center;
  display: flex;
  width: 100%;
  background-color: #d5dbe7;
}
.goodinfotitle span {
  width:20%;
}
.goodinfo{
  border-bottom: 1px solid #dfe6ec;
  padding: 10px;
  text-align: center;
  display: flex;
}
.goodinfo div{
  width:20%;
}
.payinfolist{
  width: 25%;
}
.payinfotitle{
  padding: 10px;
  text-align: center;
  display: flex;
  width: 100%;
  background-color: #d5dbe7;
}
.payinfotitle span {
  width:50%;
}
.payinfo{
  display: flex;
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #dfe6ec;
  align-items: center;
  margin: auto;
}

.payinfo div{
  width:50%;
}

</style>
